<template>
  <div class="moreServes">
    <van-nav-bar
      class="nav-bar-style"
      title="查看更多"
      :left-text="leftText"
      :right-text="rightText"
      fixed
      @click-left="leftFun"
      @click-right="rightFun"
    ></van-nav-bar>
    <div class="home-serve-style special-style">
      <p class="serve-title-style">
        首页应用<span v-show="isEdit">(按住拖动调整排序)</span>
      </p>
      <draggable
        tag="van-grid"
        :animation="150"
        :list="serverList"
        :disabled="!isEdit"
        :component-data="getComponentData()"
        class="server-content-style"
      >
        <van-grid-item
          v-for="(item, index) in serverList"
          :key="item.app_name"
          class="server-item-style"
          @click="enterServe(item)"
        >
          <svg-icon
            :icon-class="item.icon"
            widthW="1.2rem"
            heightH="1.2rem"
          ></svg-icon>
          <svg-icon
            class="del-icon-style"
            v-show="isEdit"
            icon-class="关闭"
            widthW="0.453rem"
            heightH="0.453rem"
            @click.native="delHomeServe(index, item)"
          ></svg-icon>
          <span class="item-text-style">{{ item.app_name }}</span>
        </van-grid-item>
      </draggable>
    </div>
    <div
      class="other-serve-style"
      v-for="serve in otherServeList"
      :key="serve.app_category"
    >
      <p class="serve-title-style">{{ serve.title }}</p>
      <van-grid
        :gutter="10"
        :border="false"
        :column-num="4"
        class="server-content-style"
      >
        <van-grid-item
          v-for="(item, index) in serve.serves"
          :key="item.app_name"
          class="server-item-style"
          @click="enterServe(item)"
        >
          <svg-icon
            :icon-class="item.icon"
            widthW="1.2rem"
            heightH="1.2rem"
          ></svg-icon>
          <svg-icon
            class="del-icon-style"
            v-show="isEdit"
            icon-class="添加"
            widthW="0.453rem"
            heightH="0.453rem"
            @click.native="addHomeServe(index, serve.app_category, item)"
          ></svg-icon>
          <span class="item-text-style">{{ item.app_name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import constant from "@/controller/constant.js";
import api from "@/controller/Interface.js";
import bus from "../../utils/eventBus";
export default {
  name: "moreServes",
  components: {
    draggable
  },
  data() {
    return {
      isEdit: false,
      serverList: [],
      otherServeList: [
        {
          app_category: 1,
          title: "物业服务",
          serves: []
        },
        {
          app_category: 2,
          title: "社区生活",
          serves: []
        },
        {
          app_category: 3,
          title: "公共服务",
          serves: []
        },
        {
          app_category: 4,
          title: "生活服务",
          serves: []
        },
        // {
        //   app_category: 5,
        //   title: "特色服务",
        //   serves: []
        // }
      ]
    };
  },
  computed: {
    leftText() {
      return this.isEdit ? "取消" : "返回";
    },
    rightText() {
      return this.isEdit ? "完成" : "编辑";
    }
  },
  mounted() {
    bus.$on("updateAppListMore", data => {
      this.serverList = data
    });
    if (this.$route.query.appList && this.$route.query.appList.length) {
      this.serverList = this.$route.query.appList;
    } else {
      this.serverList = [];
    }
    const appList = constant.appList;
    appList.forEach(e => {
      if (e.app_category === 1) {
        this.otherServeList[0].serves.push(e);
      } else if (e.app_category === 2) {
        this.otherServeList[1].serves.push(e);
      } else if (e.app_category === 3) {
        this.otherServeList[2].serves.push(e);
      } else if (e.app_category === 4) {
        this.otherServeList[3].serves.push(e);
      }
      // else {
      //   this.otherServeList[4].serves.push(e);
      // }
    });
    this.editOtherServe();
  },
  methods: {
    leftFun() {
      if (!this.isEdit) {
        bus.$emit("updateAppList");
        this.$router.go(-1);
      } else {
        this.isEdit = false;
      }
    },
    rightFun() {
      if (!this.isEdit) {
        this.isEdit = true;
      } else {
        let saveAppList = [];
        for (let i = 0; i < this.serverList.length; i++) {
          saveAppList.push({
            appId: this.serverList[i].id,
            sort: i
          });
        }
        api.userApp_v1_save(saveAppList).then(res => {
          if (res.code === "0") {
            this.$toast("首页应用编辑成功");
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
        this.isEdit = false;
      }
    },
    enterServe(val) {
      if (this.isEdit) return;
      if (
        val.app_name == "社区活动" ||
        val.app_name == "投票选举" ||
        val.app_name == "快递服务" ||
        val.app_name == "周边商家" ||
        val.app_name == "党群服务" ||
        val.app_name == "生活服务" ||
        val.app_name == "社区积分"
      ) {
        this.$toast("正在开发中,敬请期待。。。");
        return;
      } else {
        this.$router.push({
          path: val.path
        });
      }
    },
    getComponentData() {
      return {
        props: {
          border: false,
          columnNum: 4
        }
      };
    },
    editOtherServe() {
      this.serverList.map(v => {
        let serves = this.otherServeList[v.app_category - 1]["serves"];
        let index = serves.findIndex(item => {
          return item.app_name === v.app_name;
        });
        serves.splice(index, 1);
      });
    },
    addHomeServe(index, app_category, data) {
      if (this.serverList.length == 7) {
        this.$toast("首页应用最多7个");
        return;
      }
      data.app_category = app_category;
      this.serverList.push(data);
      this.otherServeList[app_category - 1].serves.splice(index, 1);
    },
    delHomeServe(index, data) {
      this.serverList.splice(index, 1);
      this.otherServeList[data.app_category - 1].serves.push(data);
    }
  }
};
</script>

<style lang="scss" scoped>
@mixin serve-item-style {
  .serve-title-style {
    margin: 21px 0 0 16px;
    font-size: 16px;
    color: #303133;

    span {
      font-size: 13px;
      color: #999999;
      margin-left: 6px;
    }
  }

  .server-content-style {
    min-height: 100px;

    .server-item-style {
      position: relative;

      .del-icon-style {
        position: absolute;
        top: 14px;
        right: 18px;
      }

      .item-text-style {
        margin-top: 8px;
      }
    }
  }
}

.moreServes {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;

  .home-serve-style {
    width: 100%;
    height: 247.5px;
    background: #f5f7fa;
    @include serve-item-style;
  }

  .other-serve-style {
    width: 100%;
    height: 247.5px;
    background: #ffffff;
    @include serve-item-style;
  }
}
</style>

<style lang="scss">
.moreServes {
  .nav-bar-style {
    .van-nav-bar__text {
      color: #333333;
    }
  }

  .special-style {
    .van-grid-item__content {
      background: #f5f7fa;
    }
  }
}
</style>
